<template>
  <div>
    <div class="cbg">
      <div class="uploadcontent">
        <div class="setpcon">
          <img src="./img/setp_car_1.png"/>
        </div>
        <h3>行驶证正副本 <span class="cdemo" @click="showPcar1">查看示例</span></h3>

        <ul>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.carInfo.xszZmAttid">
                <img src="./img/car_xsz.png"/>
                <p>上传正本</p>
              </div>
              <div class="upImgSuc" v-else>
              <img :src="$store.state.baseImgUrl+$store.state.carInfo.xszZmAttid"/>
              </div>
              <fileupload ref="xszZm" @uploadsucess="zbsuccess"></fileupload>
          </div>
          </li>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.carInfo.xszFmAttid">
                <img src="./img/car_xsz.png"/>
                <p>上传副本</p>
              </div>
              <div class="upImgSuc" v-else>
                <img :src="$store.state.baseImgUrl+$store.state.carInfo.xszFmAttid"/>
              </div>
              <fileupload ref="xszFm"  @uploadsucess="fbsuccess"></fileupload>
          </div>

          </li>

        </ul>
        <div class="updesc">


          请在光线充足地方拍摄行驶证正、副本，保持

          <span style="color: #FF2126">
                                字体及图片清晰可辨；6
                            </span>


          年免检的车辆，请在行驶证副本处上传免检车标。


        </div>
      </div>
    </div>


    <div class="cbg" v-if="$store.state.carInfo.xszZmAOwner || $store.state.carInfo.xszZmANum"  >
      <div class="lbox">
        <ul>
          <li>
            <label class="labelName">车主姓名</label>
            <div  class="labelCon"  >

              <input @change="changeSave()"  v-model="$store.state.carInfo.xszZmAOwner" placeholder="上传行驶证自动识别" type="text" class="carbox" />
            </div>
          </li>
          <li>
            <label class="labelName">车牌号</label>
            <div  class="labelCon" >

              <input  @change="changeSave()"   type="text" v-model="$store.state.carInfo.xszZmANum" placeholder="上传行驶证自动识别" class="carbox" />
            </div>
          </li>


        </ul>
      </div>
    </div>
    <div class="cbg" style="background: none;">
      <div class="txxy">
        <div class="libtn">
          <p></p>
          <button @click="gonext()" class="buttonOk" >下一步</button>
        </div>
      </div>



    </div>

  </div>
</template>

<script>
  export default {
    name: "pcar1",
    data(){
      return{
        radio:''
      }
    },
    created(){
      var x = localStorage.getItem('cinfo')
      if(x){
        this.$store.commit('setCarInfo',JSON.parse(x))
      }
    },
    methods:{
      changeSave(){
        localStorage.setItem('cinfo',JSON.stringify(this.$store.state.carInfo))
      },
      zbsuccess(obj){
        // alert(JSON.stringify(res))
        this.$http.post('yxc/car/vehicle',{},{
          params:{
            attachmentId:obj.data,
            side:'face',
            wxUserId:localStorage.getItem('wxUserId')
          }
        }).then(res=>{
          if(res.code ==200){
            var x = JSON.parse(res.data)
            this.$store.state.carInfo.xszZmAttid = obj.data
            this.$store.state.carInfo.xszZmAOwner = x.owner
            this.$store.state.carInfo.xszZmANum = x.plate_num
            this.$store.state.carInfo.vinNo = x.vin
            this.$store.state.carInfo.engineNo = x.engine_num

            localStorage.setItem('cinfo',JSON.stringify(this.$store.state.carInfo))

          }else{
              this.$toast('识别失败，请重新上传')
              this.$refs.xszZm.$refs.inputer.value = ''
          }
        })

      },
      fbsuccess(obj){

        this.$http.post('yxc/car/vehicle',{},{
          params:{
            attachmentId:obj.data,
            side:'back',
            wxUserId:localStorage.getItem('wxUserId')
          }
        }).then(res=>{
            if(res.code ==200){

          var x = JSON.parse(res.data)
          this.$store.state.carInfo.xszFmAttid = obj.data
          localStorage.setItem('cinfo',JSON.stringify(this.$store.state.carInfo))

          }else{
            this.$toast(res.message)
            this.$toast('识别失败，请重新上传')
            this.$refs.xszFm.$refs.$inputer.value = ''
          }
      })

      },
      showPcar1(){
        this.$card({
          name: 'pcar1_demo',
          width: '100%',
          title: '查看示例',
          funCode: 'pcar1_demo',
          callback: (close, str) => {
          close()
          // this.$refs.table.reload()
        }
      })
      },
      gonext(){
        if(!this.$store.state.carInfo.xszFmAttid || !this.$store.state.carInfo.xszZmAttid){
          this.$toast('请上传行驶证正本和副本')
          return false;
        }
        this.$router.replace({
          path:'/personCar',
          query:{
            funCode:'pcar2'
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .carbox{font-size:15px; outline:none; width:100%; border:none;}
  .libtn {
    border: none;
    text-align: center;
    button{
      outline: none;
    }
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
       padding:10px 0;
       border-radius: 100px;

       border:1px solid rgba(191,191,191,1);
       background: #FFF;
       color: #666;
       font-size: 35px;
       /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
       width: 90%;
       font-size:18px;
     }
  }
  .txxy{font-size:12px; color:#999;}
  .zftips{font-size:12px; color: #999; p{margin:0;padding:0;} padding:10px 0;}
  .lbox{
    padding:0 10px;
    li{border-bottom: 1px solid #eee;padding:15px 0; font-size: 14px;
      display: flex;
      .labelName{width:90px;}
      .labelCon{
        width:100%;
      }
    }
  }
  .el-radio{
    margin-right: 10px;
  }
  .setpcon{
    background:rgba(67,140,253,1);
    border-radius:10px;
    img{width:100%;}
    padding:15px 20px;
    margin-bottom: 20px;
  }

  .upImgs{
    img{height:90px; opacity: .8}
    text-align: center;
    p{
      text-align: center;
      margin:0;padding:0;font-size:14px;color:#999;
    }
    margin:5px;
  }
  .upImgSuc{
    margin:5px;
    overflow: hidden;
    img{height:110px; width:100%; }
  }
  .updesc{font-size:12px; color:#999; margin-top:15px;}

  .cbg{margin-bottom:10px;padding:10px; background: #FFF;}
  .uploadcontent{
    h3{
      font-size:18px;
      position: relative;
      margin:0;padding: 0;
      font-weight: 400;
      color:rgba(51,51,51,1);
      margin-bottom: 10px;
      .cdemo{font-size:14px; position: absolute; right:10px; top:5px; font-weight:normal; color:#1C67FF;}
    }
    ul{
      display: flex;
      padding:5px 0;
      li{
        position: relative;
        width:50%;
        .upimgfile{
          background:rgba(245,248,255,1);
          margin:0 5px;
          border-radius: 8px;
          padding:5px;
          position: relative;
        }
      }
    }

  }
</style>
